@include theme {
  $block: (
    tip:#0079ff,
    success:#42b983,
    warn:#e7c000,
    error:#cc0000,
  );

  .pl-markdown-img {
    text-align: center;

    img {
      max-width: 100%;
    }
  }

  .pl-markdown {
    box-sizing: border-box;
    font-size: 14px;

    /*---------------------------------------blockquote-------------------------------------------*/

    blockquote {
      font-size: 1rem;
      color: #999;
      border-left: .25rem solid #bcbcbc;
      margin-left: 0;
      margin-right: 0;
      font-style: italic;
      background-color: #f6f6f6;
      padding: 0.5rem 1rem;

      & > p {
        margin: 0;
      }
    }

    /*---------------------------------------list-------------------------------------------*/

    ol, p, ul {
      line-height: 2.4em;
    }

    ol, ul {
      padding-left: 1.2em;

      li {
        list-style: circle;
      }
    }

    strong {
      font-weight: 600
    }

    pre {
      margin: 0;
    }

    p code, li > code, td code {
      color: #476582;
      font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;

      background: #f2f4f5;
      border: 1px solid #f0f0f0;
      border-radius: 2px;
      margin: 0 1px;
      padding: .2em .4em;
    }

    .emoji {
      width: 2em;
      display: inline-block;
      text-align: center;
    }
  }

  /*---------------------------------------a-------------------------------------------*/

  a {
    font-weight: 500;
    text-decoration: none;
  }

  a, p a code {
    color: desaturate($colorPrimary, 10%);

    &:hover {
      text-decoration: underline;
    }
  }

  /*---------------------------------------header-------------------------------------------*/

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25
  }

  h1 {
    font-size: 2.2rem
  }

  h2 {
    font-size: 1.65rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #eaecef;
  }

  hr {
    border: 0;
    border-top: 1px solid #eaecef
  }

  .pl-markdown h1, .pl-markdown h2, .pl-mdc-table h2, .pl-mdc-case h2 > span {
    &:after {
      content: '#';
      display: inline;
      color: $colorPrimary;
      margin-left: 0.5em;
      opacity: 0;
      transition: opacity 300ms linear;
      font-size: 1.65rem;
    }
  }

  .pl-markdown h1, .pl-markdown h2, .pl-mdc-table h2, .pl-mdc-case h2 {
    &:hover {
      &:after, & > span:after {
        opacity: 1;
      }
    }
  }

  h3 {
    font-size: 1.35rem
  }

  /*---------------------------------------custom block-------------------------------------------*/

  .custom-block {
    margin: 1rem 0;
    padding: .1rem 1.5rem;
    border-left-width: .5rem;
    border-left-style: solid;

    & > p:first-child {
      font-weight: 600;
    }

    @each $blockName, $blockValue in $block {
      &.#{$blockName} {
        border-color: $blockValue;
        background-color: mix($blockValue, white, 7%);
        color: mix($blockValue, black, 70%);

        .block-title {
          color: $blockValue;
          font-weight: bold;
          margin-top: 1em;
          margin-bottom: 0;
          font-size: 1.25em;
        }

        code {
          background-color: mix(white, $blockValue, 85%);
          color: $blockValue;
        }
      }
    }

  }

  @each $blockName, $blockValue in $block {
    [#{$blockName}] {
      color: $blockValue;
    }
  }

  [bold] {
    font-weight: bold;
  }

  [italic] {
    font-style: italic;
  }

  [underline] {
    text-decoration: underline;
  }

  /*---------------------------------------table-------------------------------------------*/

  .pl-markdown {
    table {
      font-size: 13px;
      border-collapse: collapse;
      border-spacing: 0;
      empty-cells: show;
      border: 1px solid #e9e9e9;
      width: 100%;
      box-sizing: border-box;

      td, th {
        border: 1px solid #e9e9e9;
        padding: 8px 8px;
        text-align: left;
        box-sizing: border-box;
        empty-cells: show;
        white-space: normal;
        overflow: hidden;
        word-break: break-word;
      }

      th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600;
      }

      ul {
        margin: 0;
      }

      code {
        background-color: rgba($colorPrimary, 0.1);
        color: $colorPrimary;
        padding: .15rem .5rem;
      }
    }
  }

  .pl-mdc-table {

    $width: 120px;

    &.pl-mdc-table-props {
      table {
        tr {
          th, td {
            width: $width;

            &:last-child {
              width: initial;
            }
          }
        }
      }
    }

    &.pl-mdc-table-methods, &.pl-mdc-table-events, &.pl-mdc-table-scoped-slots {
      table {
        tr {
          th, td {
            &:nth-child(1) {
              width: $width;
              min-width: $width;
            }
          }

          th, td {
            &:nth-child(2) {
              width: $width*2;
              min-width: $width*2;
            }
          }

          th, td {
            &:last-child {
              width: initial;
            }
          }
        }
      }
    }

    &.pl-mdc-table-slots {
      table {
        tr {
          th, td {
            &:nth-child(1) {
              width: $width;
              min-width: $width;
            }
          }

          th, td {
            &:last-child {
              width: 99%;
            }
          }
        }
      }
    }
  }
}